$(function () {
    var width = $(document).width();
    var height = $(document).height();
    var backbg = $('<div id="backbg"></div>');
    var bigimage = $('<div id="bigimage"></div>');
    $("#itimage").click(function () {
        $("#backbg").show();
        $("#bigimage").show();
        $("body").prepend(backbg);
        $("#backbg").css({
            "width":"100%",
            "height":"100%",
            "background":"#000",
            "opacity":0.5,
            "position":"absolute",
            "z-index":999,
            "top":0
        });
        $("body").prepend(bigimage);
        $("#bigimage").css({
            "width":"300px",
            "height":"466px",
            "position":"absolute",
            "z-index":1000,
            "border":"2px solid #fff",
            "top":"50%",
            "left":"50%",
            "margin-left":"-150px",
            "margin-top":"-233px"
        }).html('<img src="../images/su23.jpg" width="100%"/>');
        $("#backbg").click(function () {
            $("#backbg").hide();
            $("#bigimage").hide();
        });
    });
});